<template>
    <div class="base-count">
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button @click="count++">+</button>
    </div>
</template>

<script>
export default {
    /*
        一个组件的 data 选项必须是一个函数。
        保证每个组件实例，维护独立的一份数据对象
        每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。
    */
    data() {
        return {
            count: 999
        }
    }

}
</script>

<style scoped>
.base-count {
    margin: 20px;
}
</style>